<template>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="5" style="font-size: 24px;">公告墙</el-col>
      <el-col :span="3">
        <el-button size="mini" @click="noticeDialog=true">发公告</el-button>
      </el-col>
    </el-row>
    <el-collapse
      v-model="activeName"
      accordion
      style="margin-top: 20px;"
      v-for="(item,index) in noticeList"
      :key="index"
    >
      <el-collapse-item :title="item.name+'-------------'+item.date" :name="index">
        <div>{{item.msg}}</div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog title="发送公告" :visible.sync="noticeDialog" width="50%" class="add_dialog">
      <!--内容主体-->
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="noticeNews.msg"
        maxlength="200"
        show-word-limit
        style="width:100%;"
        rows="3"
      ></el-input>
      <!--按钮-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendNotice()">确定</el-button>
        <el-button @click="noticeDialog=false">取消</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  props: ['username'],
  data() {
    return {
      activeName: '0',
      noticeList: [
        {
          name: '',
          msg: '',
          date: ''
        }
      ],
      noticeNews: {
        name: this.username,
        msg: '',
        date: this.comm.timeFilter()
      },
      noticeDialog: false
    }
  },
  methods: {
    // 发送公告
    async sendNotice() {
      const res = await this.$http.post('/adminNotice', this.noticeNews)
      if (res.meta.status !== 200) {
        return this.$Message.error('发送失败')
      }
      this.$Message.success('发送成功')
      this.noticeDialog = false
      this.noticeList.push(this.noticeNews)
    }
  },
  mounted() {
    this.comm.getnotice('admin', this).then(data => {
      this.noticeList = data.notice.reverse()
    })
  }
}
</script>
<style lang="less" scoped>
</style>
